<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
// 创建组件
class Person extends React.Component{

  // 构造器是否接收props，是否传递给super,取决于：是否希望在构造器中通过this访问props

  constructor(props){
    super(props)
    console.log('consturctior', this.props)
  }

  // 2.propTypes 是固定写法, 类型限定，及必要性限制
  static propTypes = {
    // name: React.PropTypes.string  // 15版本之前的写法
    name: PropTypes.string.isRequired,  // 名字是字符串且必传
    age: PropTypes.number,
    set: PropTypes.string,
    speak: PropTypes.func, // 限制为函数
  }

  // 3. 传默认值
  static defaultProps = {
    sex: '不男不女',
    age: 18
  }

  // props 是只读的 不允许修改
  // this.props.name = "hello" // 这行代码会导致报错
  render(){
    const {name, sex, age} = this.props
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    )
  }
}


ReactDOM.render(<Person name = "tom" age={18} speak={speak}/>, document.getElementById('root'))

// 数字型的传值
ReactDOM.render(<Person name = "jerry" age={19} sex="男"/>, document.getElementById('root1'))
</script>
</html>
